<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>项目活跃度分析</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <!-- 引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .filter-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
    }
    .layui-input, .layui-select {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      border-radius: 4px;
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      box-sizing: border-box;
    }
    .chart-item {
      flex: 1;
      min-width: 300px;
      height: 300px;
    }
    .chart-item-full {
      flex: 100%;
      height: 350px;
    }
    .data-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
    }
    .stat-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
    .stat-total::before {
      background-color: #3B82F6;
    }
    .stat-active::before {
      background-color: #10B981;
    }
    .stat-participants::before {
      background-color: #8B5CF6;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 22px;
      margin-bottom: 5px;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .time-range-btns {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    .time-range-btn {
      padding: 5px 12px;
      background-color: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    .time-range-btn.active {
      background-color: #3B82F6;
      color: #FFFFFF;
      border-color: #3B82F6;
    }
    .table-container {
      padding: 0 20px 20px;
    }
    .layui-table {
      margin: 0;
      border-radius: 6px;
    }
    .project-name {
      max-width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .progress-container {
      width: 100%;
      height: 8px;
      background-color: #E2E8F0;
      border-radius: 4px;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      border-radius: 4px;
    }
    .progress-high {
      background-color: #10B981;
    }
    .progress-medium {
      background-color: #F59E0B;
    }
  </style>
</head>
<body>
  <!-- 核心数据统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-cubes"></i> 项目核心数据</h3>
      <div>
        <button class="layui-btn layui-btn-primary" id="refreshDataBtn">
          <i class="fa fa-refresh"></i> 刷新
        </button>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="data-stats">
        <div class="stat-item stat-total">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-cube"></i></div>
          <div class="stat-value">328</div>
          <div class="stat-label">总项目数</div>
        </div>
        <div class="stat-item stat-active">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-bolt"></i></div>
          <div class="stat-value">186</div>
          <div class="stat-label">活跃项目数</div>
        </div>
        <div class="stat-item stat-participants">
          <div class="stat-icon" style="color: #8B5CF6;"><i class="fa fa-users"></i></div>
          <div class="stat-value">2,854</div>
          <div class="stat-label">参与总人数</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 项目活跃度趋势分析 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-line-chart"></i> 活跃度趋势</h3>
    </div>
    <div class="filter-bar">
      <div class="time-range-btns" id="activityTimeRange">
        <div class="time-range-btn active" data-range="week">近7天</div>
        <div class="time-range-btn" data-range="month">近30天</div>
        <div class="time-range-btn" data-range="quarter">近90天</div>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item-full" id="projectActivityChart"></div>
      </div>
    </div>
  </div>

  <!-- 项目分类与活跃度分布 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-pie-chart"></i> 项目分布分析</h3>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item" id="projectTypeChart"></div>
        <div class="chart-item" id="activityDistributionChart"></div>
      </div>
    </div>
  </div>

  <!-- 活跃项目排行 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-trophy"></i> 活跃项目排行</h3>
    </div>
    <div class="table-container">
      <table class="layui-table" lay-size="sm">
        <thead>
          <tr>
            <th style="width: 60px;">排名</th>
            <th>项目名称</th>
            <th>负责人</th>
            <th>参与人数</th>
            <th>活跃度</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #F59E0B; color: white; border-radius: 50%; text-align: center;">1</span></td>
            <td>
              <div class="project-name" title="基于深度学习的图像识别研究平台">基于深度学习的图像识别研究平台</div>
            </td>
            <td>zhangwei</td>
            <td>32</td>
            <td>
              <div class="progress-container">
                <div class="progress-bar progress-high" style="width: 92%"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #94A3B8; color: white; border-radius: 50%; text-align: center;">2</span></td>
            <td>
              <div class="project-name" title="科研数据管理系统开发">科研数据管理系统开发</div>
            </td>
            <td>liming</td>
            <td>18</td>
            <td>
              <div class="progress-container">
                <div class="progress-bar progress-high" style="width: 88%"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #D97706; color: white; border-radius: 50%; text-align: center;">3</span></td>
            <td>
              <div class="project-name" title="高校科研资源共享平台">高校科研资源共享平台</div>
            </td>
            <td>wanghong</td>
            <td>25</td>
            <td>
              <div class="progress-container">
                <div class="progress-bar progress-high" style="width: 85%"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td>
              <div class="project-name" title="人工智能算法竞赛训练系统">人工智能算法竞赛训练系统</div>
            </td>
            <td>zhaoli</td>
            <td>42</td>
            <td>
              <div class="progress-container">
                <div class="progress-bar progress-medium" style="width: 76%"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td>5</td>
            <td>
              <div class="project-name" title="研究生科研能力培养体系">研究生科研能力培养体系</div>
            </td>
            <td>sunjie</td>
            <td>15</td>
            <td>
              <div class="progress-container">
                <div class="progress-bar progress-medium" style="width: 68%"></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 项目管理系统 - 版权所有
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'layer'], function() {
      const form = layui.form;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 时间范围按钮点击事件
      document.querySelectorAll('#activityTimeRange .time-range-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          // 移除所有按钮的active类
          document.querySelectorAll('#activityTimeRange .time-range-btn').forEach(b => {
            b.classList.remove('active');
          });
          // 给当前点击的按钮添加active类
          this.classList.add('active');
          
          // 刷新图表数据
          updateActivityChart(this.getAttribute('data-range'));
        });
      });
      
      // 刷新数据按钮
      document.getElementById('refreshDataBtn').addEventListener('click', function() {
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg('数据已刷新', {icon: 1, time: 1000});
        }, 1000);
      });
      
      // 初始化项目活跃度趋势图表
      function initActivityChart() {
        const chartDom = document.getElementById('projectActivityChart');
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['活跃项目数', '项目更新次数', '参与人数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['9/12', '9/13', '9/14', '9/15', '9/16', '9/17', '9/18']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '活跃项目数',
              type: 'line',
              data: [156, 162, 170, 168, 175, 180, 186],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#3B82F6'
              },
              itemStyle: {
                color: '#3B82F6'
              }
            },
            {
              name: '项目更新次数',
              type: 'line',
              data: [325, 356, 389, 365, 412, 435, 458],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#10B981'
              },
              itemStyle: {
                color: '#10B981'
              }
            },
            {
              name: '参与人数',
              type: 'line',
              data: [2541, 2587, 2645, 2698, 2732, 2789, 2854],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#8B5CF6'
              },
              itemStyle: {
                color: '#8B5CF6'
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
        
        return myChart;
      }
      
      // 更新项目活跃度趋势图表
      function updateActivityChart(range) {
        let xAxisData, activeProjectsData, updatesData, participantsData;
        
        // 根据不同的时间范围设置不同的数据
        switch(range) {
          case 'week':
            xAxisData = ['9/12', '9/13', '9/14', '9/15', '9/16', '9/17', '9/18'];
            activeProjectsData = [156, 162, 170, 168, 175, 180, 186];
            updatesData = [325, 356, 389, 365, 412, 435, 458];
            participantsData = [2541, 2587, 2645, 2698, 2732, 2789, 2854];
            break;
          case 'month':
            xAxisData = ['8/20', '8/25', '8/30', '9/5', '9/10', '9/15', '9/18'];
            activeProjectsData = [142, 148, 155, 162, 170, 180, 186];
            updatesData = [1254, 1387, 1523, 1654, 1823, 2154, 2456];
            participantsData = [2456, 2512, 2567, 2623, 2698, 2789, 2854];
            break;
          case 'quarter':
            xAxisData = ['7/1', '7/15', '8/1', '8/15', '9/1', '9/15', '9/18'];
            activeProjectsData = [120, 130, 140, 148, 160, 180, 186];
            updatesData = [3254, 3890, 4567, 5123, 5642, 6254, 6854];
            participantsData = [2154, 2235, 2387, 2512, 2601, 2754, 2854];
            break;
        }
        
        // 更新图表数据
        const myChart = echarts.getInstanceByDom(document.getElementById('projectActivityChart'));
        myChart.setOption({
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              name: '活跃项目数',
              data: activeProjectsData
            },
            {
              name: '项目更新次数',
              data: updatesData
            },
            {
              name: '参与人数',
              data: participantsData
            }
          ]
        });
      }
      
      // 初始化项目类型图表
      function initProjectTypeChart() {
        const chartDom = document.getElementById('projectTypeChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '项目类型分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['研究项目', '开发项目', '教育项目', '竞赛项目']
          },
          series: [
            {
              name: '项目类型',
              type: 'pie',
              radius: '70%',
              data: [
                { value: 145, name: '研究项目', itemStyle: { color: '#3B82F6' } },
                { value: 98, name: '开发项目', itemStyle: { color: '#10B981' } },
                { value: 52, name: '教育项目', itemStyle: { color: '#F59E0B' } },
                { value: 33, name: '竞赛项目', itemStyle: { color: '#8B5CF6' } }
              ]
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 初始化活跃度分布图表
      function initActivityDistributionChart() {
        const chartDom = document.getElementById('activityDistributionChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '项目活跃度分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['高活跃', '中活跃', '低活跃', '不活跃']
          },
          yAxis: {
            type: 'value',
            name: '项目数量'
          },
          series: [
            {
              name: '项目数量',
              type: 'bar',
              data: [78, 105, 82, 63],
              itemStyle: {
                color: function(params) {
                  const colorList = ['#10B981', '#F59E0B', '#FBBF24', '#94A3B8'];
                  return colorList[params.dataIndex];
                }
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 页面加载完成后初始化所有图表
      window.addEventListener('load', function() {
        initActivityChart();
        initProjectTypeChart();
        initActivityDistributionChart();
      });
    });
  </script>
</body>
</html>
